<template>
  <div id="header">
    <van-row gutter="20">
      <van-col span="8">
        <van-icon name="arrow-left" @click="lastOne" />
      </van-col>
      <van-col span="8" style="font-size: 4.3vw">{{ myMT }}</van-col>
      <van-col span="8"
        ><van-icon
          style="margin-left: 10vw"
          name="wap-home-o"
          @click="toHome" /><van-icon
          style="margin-left: 4vw"
          name="search"
          @click="toSearch"
      /></van-col>
    </van-row>
  </div>
  <div id="center">
    <div><img :src="userImg" alt="" /></div>
    <div>
      <p>
        {{ name
        }}<van-icon
          name="fire-o"
          style="color: red; float: right; padding-right: 2vw"
        />
      </p>
      <span
        >账户余额：<i>{{ money }}</i
        >元</span
      >
    </div>
  </div>
  <div id="main">
    <div id="main1" @click="toOrder">
      <img :src="ordertImg" alt="" /><span>全部订单</span>
    </div>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-grid-item style="height: 8vw" icon="balance-o" text="待付款" />
      </van-grid-item>
      <van-grid-item>
        <van-grid-item
          style="height: 8vw"
          icon="balance-list-o"
          text="待使用"
        />
      </van-grid-item>
      <van-grid-item>
        <van-grid-item style="height: 8vw" icon="records" text="待评价" />
      </van-grid-item>
      <van-grid-item>
        <van-grid-item style="height: 8vw" icon="cash-o" text="退款/售后" />
      </van-grid-item>
    </van-grid>
    <div id="main1" @click="toCollection">
      <img :src="collectionImg" alt="" /><span>我的收藏</span>
    </div>
    <div id="main1" @click="toVolume">
      <img :src="volumeImg" alt="" /><span>我的抵用卷</span>
    </div>
    <div id="main1" @click="toLuckDraw">
      <img :src="luckDrawImg" alt="" /><span>我的抽奖单</span>
    </div>
    <div id="footer">
      <span @click="flag = !flag"
        >城市:<van-icon name="location" style="color: rgb(255, 195, 0)" /></span
      ><span v-show="cityFlag"> {{ arrData }}</span>
      <div class="footer1">
        <van-row :wrap="false">
          <van-col @click="toHome">首页</van-col>|
          <van-col @click="toDownload">美团下载</van-col>|
          <van-col @click="toHome">电脑版</van-col>|
          <van-col @click="help">帮助</van-col>|
          <van-col @click="exit">退出</van-col>
        </van-row>
      </div>
      <div class="footer2">
        <van-row justify="center" style="font-size: 3.2vw">
          <van-col span="4">友情链接:</van-col>
          <van-col span="4">
            <a href="https://m.maoyan.com/?channel=touch_group#movie"
              >猫眼电影</a
            ></van-col
          >
          <van-col span="4">
            <a href="https://m.dianping.com/">大众点评</a></van-col
          >
          <van-col span="4">
            <a
              href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yql"
              >美团旅行</a
            ></van-col
          >
          <van-col span="4">
            <a href="https://minsu.dianping.com/?domain_type=i"
              >榛果民宿</a
            ></van-col
          >
          <van-col span="6">
            <a href="https://evt.dianping.com/synthesislink/9496.html"
              >大众点评下载</a
            ></van-col
          >
          <van-col span="6">
            <a href="https://rms.meituan.com/">美团餐饮系统</a></van-col
          >
          <van-col span="6">
            <a href="https://xue.meituan.com/?from=mt0"
              >美团餐饮培训</a
            ></van-col
          >
          <van-col span="8">
            <a href="https://www.kuailvzaixian.com/"
              >快驴进货商家合作</a
            ></van-col
          >
          <van-col span="8">
            <a href="https://123.meituan.com/v3?source=mtwib/"
              >商机/招聘</a
            ></van-col
          >
        </van-row>
      </div>
    </div>
    <van-area
      title="标题"
      :area-list="areaList"
      v-show="flag"
      @confirm="confirm"
      @cancel="cancel"
    />
    <van-divider
      :style="{
        color: '#999',
        borderColor: '#999',
        margin: '0',
        fontSize: ' 2vw'
      }"
    >
      ©2022 美团网 京ICP证070791号
    </van-divider>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { areaList } from '@vant/area-data'
export default defineComponent({
  setup() {
    return { areaList }
  },
  data() {
    return {
      flag: false,
      cityFlag: false,
      arrData: [],
      myMT: '我的美团',
      userImg:
        'https://p0.meituan.net/travelcube/3b142f09b750b48bf0927588b90e01ce10757.png',
      ordertImg:
        'https://p0.meituan.net/imeituanbusiness/882e8c2a00606ddac3a582afac07e7141910.png',
      collectionImg:
        'https://p0.meituan.net/imeituanbusiness/ea8c4bea1ef60d56936878f00c47e4dc1803.png',
      volumeImg:
        'https://p0.meituan.net/imeituanbusiness/0035b1d0351edbd261e18a2cea8f881e1403.png',
      luckDrawImg:
        'https://p0.meituan.net/imeituanbusiness/8b96963d427798e882b394e48d84ae251149.png',
      name: '',
      money: 0.0
    }
  },
  created() {
    this.name = localStorage.getItem('adminname')
  },

  methods: {
    help() {
      this.$router.push('/help')
    },
    confirm(val) {
      this.arrData = val[0].name + '-' + val[1].name + '-' + val[2].name
      this.flag = false
      this.cityFlag = true
    },
    exit() {
      localStorage.removeItem('vuex')
      localStorage.removeItem('adminname')
      this.$router.push('/login')
    },
    cancel() {
      this.flag = false
    },
    lastOne() {
      this.$router.go(-1)
    },
    toHome() {
      this.$router.push('/')
    },
    toOrder() {
      this.$router.push('/order')
    },
    toSearch() {
      this.$router.push('/search')
    },
    toCollection() {
      this.$router.push('/collection')
    },
    toVolume() {
      this.$router.push('/volume')
    },
    toLuckDraw() {
      this.$router.push('/luckDraw')
    },
    toDownload() {
      this.$router.push('/download')
    }
  }
})
</script>

<style lang="scss" scoped>
html,
body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#header {
  height: 13.3vw;
  background: linear-gradient(135deg, #ffd000, #ffbd00);
  font-size: 6.4vw;
  line-height: 13.3vw;
  padding: 0 4vw;
}
#center {
  height: 0.73rem;
  background: url(//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:d5896c44/touch/img/my-photo.png)
    no-repeat;
  background-size: contain;
  padding: 3.7vw 5.3vw;
  div:nth-child(1) {
    width: 16vw;
    height: 16vw;
    float: left;
    img {
      height: 100%;
      width: 100%;
    }
  }
  div:nth-child(2) {
    float: left;
    margin-left: 5.3vw;
    p {
      font-size: 4vw;
      margin-top: 2vw;
    }
    span {
      margin-top: 3.5vw;
      font-size: 3.2vw;
      display: block;
      i {
        color: #ff9712;
        padding-right: 1vw;
      }
    }
  }
}
#main {
  width: 100vw;
  font-size: 3.7vw;
  #main1 {
    border-bottom: 0.3vw #ddd8ce solid;
    overflow: hidden;
    padding: 3.7vw 2.7vw;
    img {
      width: 6.7vw;
      display: block;
      float: left;
      overflow: hidden;
    }
    span {
      display: block;
      float: left;
      line-height: 6.7vw;
      margin-left: 3.2vw;
    }
  }
}
#footer {
  padding: 4vw 6.7vw 0 6.7vw;
  font-size: 3.5vw;

  span:nth-child(1) {
    color: #999;
  }
  .footer1 {
    margin-top: 6.7vw;

    .van-col {
      width: 20vw;
      color: #fe8c00;
      text-align: center;
      margin: 0;
    }
  }
  .footer2 {
    text-align: center;
    margin-top: 4vw;
    line-height: 6vw;
    font-size: 2vw;
    .van-col {
      margin: 0 1vw;
      a {
        text-decoration: none;
        color: #646464;
      }
    }
  }
}
.footer3 {
  font-size: 2vw;
  width: 100%;
  text-align: center;
  color: #999;
  margin-top: 2vw;
}
.van-area {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>
